<template>
  <div v-if="showDeployDialog">
    <el-dialog
      title="部署YAML"
      :visible.sync="showDeployDialog"
      width="900px"
      :destroy-on-close="true"
      :before-close="beforeCloseDialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :model="deployCloudYamlInfo"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div style="width: 95%">
            <el-row>
              <el-col :span="12">
                <el-form-item label="部署名称" prop="yamlDeployName">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlDeployName"
                    style="width: 100%"
                    placeholder="部署名称为1-63位数字或小写字母组成"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="中文名称" prop="yamlZhname">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlZhname"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div style="width: 95%">
            <el-col :span="12">
                <el-form-item label="名称" prop="yamlName">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlName"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            <el-row>
              <el-col :span="12">
                <el-form-item label="版本" prop="yamlVersion">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlVersion"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div style="display: flex; width: 100%">

          <div style="width: 95%">
            <el-row>
              <el-col :span="12">
                <el-form-item label="命名空间" prop="namespace">
                  <el-input
                    v-model="namespace"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="镜像名称" prop="yamlImages">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlImages"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="描述" prop="yamlDescription">
                  <el-input
                    type="textarea"
                    v-model="deployCloudYamlInfo.yamlDescription"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="分区选择" prop="partitionZhname">
                  <el-select v-model="deployCloudYamlInfo.partitionZhname" placeholder="请选择服务版本" style="width: 100%"
                    @change="handlePartitionChange">
                    <el-option v-for="item in partitionOptions" :key="item.id" :label="item.partitionZhname"
                      :value="item.partitionZhname" :data-id="item.id"></el-option>
                  </el-select>
                  <!-- <el-tooltip class="item" effect="dark" content="服务部署至指定集群分区节点，非必选项" placement="bottom-start"><i
                      class="el-icon-question"
                      style="font-size: 25px; color: slategray;"></i></el-tooltip> -->
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div style="width: 5%; display: flex; align-items: center; margin-top: 20px; "> 
            <el-tooltip class="item" effect="dark" content="服务部署至指定集群分区节点，非必选项" placement="bottom-start">
      <i class="el-icon-question" style="font-size: 25px; color: slategray;"></i>
    </el-tooltip>
          </div>
        </div>
          <el-form-item>
            <div style="display: flex; justify-content: right; width: 95%">
              <el-button
                type="primary"
                @click="submitForm()"
                class="el-button-primary-style"
                >部署
              </el-button>
              <el-button
                @click="beforeCloseDialog(null)"
                type="primary"
                class="el-button-primary-style"
                style="margin-right: 10px"
                >取消
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTenantId } from "@/utils/tenantId";

export default {
  name: "ImportCloudYaml",
  props: ["tmpGvCloudYamlInfo"],
  data() {
    return {
      showDeployDialog: false,
      openAttentionDialog: false,
      namespace: "",
      deployCloudYamlInfo: {
        yamlDeployName: "",
        yamlDeployType: "",
        yamlName: "",
        yamlZhname: "",
        yamlVersion: "",
        yamlDescription: "",
        yamlImages: "",
        yamlContent: "",
        yamlInterface: "",
        partitionZhname: "",
        partitionId: "",
      },
      partitionOptions: [], // 存储分区数据
      rules: {
        yamlDeployName: [
          { required: true, message: "请输入部署名称", trigger: "blur" },
          {
            min: 1,
            max: 63,
            message:
              "部署名称必须为1-63位数字或字母组成，可以包含连字符，但不能以连字符开头或结尾，并且以字母或数字开头",
            trigger: "blur",
          },
          {
            pattern: /^[a-z0-9]([-a-z0-9]{0,62}[a-z0-9])?$/,
            message:
              "部署名称必须为1-63位数字或小写字母组成，可以包含连字符，但不能以连字符开头或结尾，并且以字母或数字开头",
            trigger: ["blur", "change"],
          },
        ],
        // yamlName: [
        //   {required: true, message: '请输入名称', trigger: 'blur'},
        //   {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'},
        //   {
        //     pattern: /^[a-zA-Z]([a-zA-Z0-9])*$/,
        //     message: "标识只能包含字母、数字，且只能以字母开头",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // yamlVersion: [
        //   {required: true, message: '请输入yaml版本', trigger: 'blur'},
        //   {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
        //   {
        //     pattern: /^[a-zA-Z0-9]([a-zA-Z0-9.])*$/,
        //     message: "版本只能包含字母、数字、点，且只能以字母数字开头",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // yamlImages: [
        //   {required: true, message: '请输入yaml镜像名称', trigger: 'blur'},
        //   {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
        //   {
        //     pattern: /^[a-z0-9]([a-z0-9./:])*$/,
        //     message: "镜像名称非法",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // yamlDescription: [
        //   {required: true, message: '请输入yaml名称', trigger: 'blur'},
        //   {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        // ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // deploy 逻辑
          this.$appManageApi
            .deployCloudYaml(this.deployCloudYamlInfo)
            .then((res) => {
              if (res && res.code === 200) {
                this.$message.success("部署成功");
                this.beforeCloseDialog(null);
                this.$appManageApi.startCloudYaml([res.data]).then((res) => {
                  if (res && res.code === 200) {
                    this.$message.success(res.data);
                  }
                });
                this.$router.push({
                  name: "CloudNativeManage",
                  // query: { code: res.data },
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    beforeCloseDialog(done) {
      this.showDeployDialog = false;
      this.deployCloudYamlInfo = {
        yamlDeployName: "",
        yamlDeployType: "",
        yamlName: "",
        yamlZhname: "",
        yamlVersion: "",
        yamlDescription: "",
        yamlImages: "",
        yamlContent: "",
        yamlInterface: "",
      };
      this.$emit("closeDeployDialog");
      if (done !== null) {
        done();
      }
    },
    // 获取分区信息
    async fetchPartitionOptions() {
      await this.$appManageApi.getPartitionOptions().then((res) => {
        if (res && res.code === 200) {
          // 确保 id 是字符串格式
          this.partitionOptions = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 处理分区选择
    handlePartitionChange(selectedZhname) {
      const selectedPartition = this.partitionOptions.find(
        (item) => item.partitionZhname === selectedZhname
      );

      if (selectedPartition) {
        this.deployCloudYamlInfo.partitionId = selectedPartition.id;
        this.deployCloudYamlInfo.partitionZhname = selectedPartition.partitionZhname;
      }
    },
  },
  beforeMount() {
    this.$tenantManageApi
      .getTenantNameById(getTenantId())
      .then((response) => {
        this.namespace = response.data;
        this.$store.dispatch("cloudYaml/namespaceUpdate", this.namespace);
      })
      .catch((error) => {
        console.error(error);
      });
    console.log(this.deployCloudYamlInfo);
    this.deployCloudYamlInfo.yamlImages = this.tmpGvCloudYamlInfo.yamlImages;
    this.deployCloudYamlInfo.yamlName = this.tmpGvCloudYamlInfo.yamlName;
    this.deployCloudYamlInfo.yamlZhname = this.tmpGvCloudYamlInfo.yamlZhname;
    this.deployCloudYamlInfo.yamlVersion = this.tmpGvCloudYamlInfo.yamlVersion;
    this.deployCloudYamlInfo.yamlDescription =
      this.tmpGvCloudYamlInfo.yamlDescription;
    this.deployCloudYamlInfo.yamlContent = this.tmpGvCloudYamlInfo.yamlContent;
    this.deployCloudYamlInfo.yamlInterface =
      this.tmpGvCloudYamlInfo.yamlInterface;
  },
  created() {
    this.fetchPartitionOptions();
  },
  // beforeDestroy() {
  //   console.log(111);
  // }
};
</script>

<style scoped></style>
